<template>
  <div class="demo-title">picker/demo2</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="title.show()">标题样式</div>
  </div>
  <Picker v-model:visible="title.visible" title="城市选择" v-model="title.value" :columns="title.columns" @confirm="title.onConfirm" @cancel="title.onCancel" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Picker from '@sscd-mobile/picker'
  const title = reactive({
    visible: false,
    show: () => title.visible = true,
    value: ['WenChang'],
    columns: [
      { text: '海口市', value: 'HaiKou' },
      { text: '三亚市', value: 'SanYa' },
      { text: '三沙市', value: 'SanSha' },
      { text: '儋州市', value: 'DanZhou' },
      { text: '五指山市', value: 'WuZhiShan' },
      { text: '文昌市', value: 'WenChang' },
      { text: '琼海市', value: 'QiongHai' },
      { text: '万宁市', value: 'WanNing' },
      { text: '东方市', value: 'DongFang' },
      { text: '定安县', value: 'DingAn' },
      { text: '屯昌县', value: 'TunChang' },
      { text: '澄迈县', value: 'ChengMai' },
      { text: '临高县', value: 'LinGao' },
      { text: '白沙黎族自治县', value: 'BaiSha' },
      { text: '昌江黎族自治县', value: 'ChangJiang' },
      { text: '乐东黎族自治县', value: 'LeDong' },
      { text: '陵水黎族自治县', value: 'LingShui' },
      { text: '保亭黎族苗族自治县', value: 'BaoTing' },
      { text: '琼中黎族苗族自治县', value: 'QiongZhong' }
    ],
    onConfirm: (res) => console.log('onConfirm: ', res),
    onCancel: (res) => console.log('onCancel: ', res)
  })
</script>

<style scoped></style>
